<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历：   用于DOM树中遍历元素 【理解：针对元素嵌套，父子级】
		  children()
		  parent()
		  
		  siblings()
		  
		  next()
		  prev()
		  
		  each()
		 
		 -->
		 <style>
			 .container{
				 border: 1px solid #e1eea0;
				 padding: 10px;
				 margin: 10px;
			 }
			 .box{
				 background-color: #c5ebee;
				 padding: 10px;
				 margin: 10px;
			 }
			 button{
				 margin: 10px;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 元素便利： 用于DOM树中遍历元素 【理解：针对元素嵌套， 父子级】 
		             children()                 功能：获取匹配元素集合中每个元素的子元素
		             parent()                   功能：获取匹配元素集合中每个元素的父元素
		        
		            siblings()                 功能：获取匹配元素集合中每个元素的下一个兄弟元素
		            
		            next()                 功能：获取匹配元素集合中每个元素的下一个兄弟元素
		            prev()                 功能：获取匹配元素集合中每个元素的上一个兄弟元素
		            
		            each()                 功能：遍历匹配元素的集合-遍历所有元素
					                            语法糖：each(function(index,element){
													$(element).text(``)
													注意：打印遍历的值，不可以使用单双引号
													功能：获取到的元素，遍历元素内容
												})
												   index: 下标  element：元素 形参
		        -->
		 <div class="container">
		 	<div class="box" id="box1">盒子1</div>
		 	<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
			</div>
		 </div>
		 <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="gc">遍历元素</button>
		 <script>
			 // 1.点击  获取子元素 按钮  实现.container下所有子元素添加背景色
			 $("#gc").click(function(){
				 //通过  父找子  函数 --添加效果
				 $(".container").children().css("background-color","#eed2da")
			 })
			 /* 2.点击 获取父元素 按钮 实现.container 添加背景色*/
			 $("#gp").click(function(){
			 	$("#box2").parent().css("background-color","#d6dfee");
			 });
			 /* 3.点击 获取兄弟元素 按钮 实现#box4 字体颜色不变，其他变色*/
			 $("#gs").click(function(){
			 	$("#box4").siblings().css("color","#fdffd2");
			 });
			 /* 4.点击 获取下一个兄弟元素 按钮 实现#box4 下一个兄弟，添加背景色*/
			 $("#gn").click(function(){
			 	$("#box4").next().css("background-color","#c4eeed");
			 });
			 /* 5.点击 获取上一个兄弟元素 按钮 实现#box6 下一个兄弟，添加效果
			                                    圆、背景图、背景色、盒子阴影
			 */
			$("#gr").click(function(){
				$("#box6").prev().css({"width":"100px",
				                       "height":"100px",
									   "background-color":"#ff0",
									   "border-radius":"50%",
									   "background-image":"url(../img/123.png)",
									   "box-shadow":"5px 5px 10px #eaffde",
									   "background-size":"100% 100%",
									   "font-size":"0"
				});
			});
			/* 6.点击 遍历元素  按钮  实现每个盒子上，这是第几个盒子  */
			$("#loop").click(function(){
				//通过 .box 抓到6个元素【一组集合】
				$(".box").each(function(i,e){  //e代表元素 i代表下标
					//每个盒子加文字,这是第几个盒子
					$(e).text(`这是第4{i+1}盒子`)
				});
			})
		 </script>
	</body>
</html>